<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="/WEB-INF/googlemaps.tld" prefix="googlemaps"%>
<%@taglib uri="http://displaytag.sf.net" prefix="display"%>

<!-- becomes the css class of the li element -->
<c:set var="tab_harbours" value="active" scope="request"/>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Harbours</title>
		<script
			src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAALUH_pcJpJzUxKa34zOTlrRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTGYWW_rjWc6kzdcZqyfYkFoYzyig"
		type="text/javascript"></script>

		<googlemaps:map id="map" width="80%" height="300" version="2"
				type="normal" zoom="12">
			<googlemaps:key domain="http://localhost"
					key="ABQIAAAALUH_pcJpJzUxKa34zOTlrRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTGYWW_rjWc6kzdcZqyfYkFoYzyig" />
			<googlemaps:point id="point1" latitude="45.00" longitude="24.00" />
			<googlemaps:marker id="marker1" point="point1" />
		</googlemaps:map>

		<googlemaps:scripttag id="map" scope="site" />
		<googlemaps:javascript id="map"></googlemaps:javascript>

		<script type="text/javascript">
			function showOnMap(lat, lon, context) {
				map.clearOverlays();

				var point = new GLatLng(lat, lon);
				var options = {title:context};

				map.setCenter(point, 6);
				map.addOverlay(new GMarker(point, options));
			}
		</script>
	</head>

	<body>

		<display:table uid="harbour" name="${harbours}" defaultsort="1"
			       defaultorder="ascending" pagesize="10" class="dt">
			<display:column property="name" title="Harbour Name"
					maxLength="60" />
			<display:column property="latitude"
					title="Latitude" maxLength="10" />
			<display:column property="longitude" title="Longitude"
					maxLength="10" />
			<display:column>
				<img src="<c:url value='images/show-map.png'/>"
				     onclick="showOnMap(${harbour.latitude}, ${harbour.longitude}, '${harbour.name}')" />
			</display:column>

			<display:setProperty name="basic.empty.showtable" value="true" />
			<display:setProperty name="paging.banner.group_size" value="10" />
			<display:setProperty name="paging.banner.onepage"
					     value="<span class='pagelinks'>&nbsp;</span>" />
		</display:table>

		<googlemaps:div id="map" scope="page"></googlemaps:div>
		<c:out value="Harbours Map"></c:out>

		<googlemaps:initialize id="map" scope="page" />

		<googlemaps:map id="map" width="250" height="300" version="2"
				type="HYBRID" zoom="12">
			<googlemaps:key domain="localhost"
					key="ABQIAAAALUH_pcJpJzUxKa34zOTlrRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTGYWW_rjWc6kzdcZqyfYkFoYzyig" />
			<googlemaps:point id="point1" latitude="23" longitude="45" />
			<googlemaps:marker id="marker1" point="point1" />
		</googlemaps:map>

	</body>
</html>
